<template>
  <div class="view-wrapper">
    <div class="main">
      <div class="main_title">查看详情</div>
      <div class="main_body">
        <div class="item_box">
          <div class="item_box_title">
            <span class="title_garden"></span>
            <span class="title_word">基本信息</span>
          </div>
          <div class="item_box_body">
            <el-table :data="basicInfoList" stripe border tooltip-effect="dark" style="width: 100%">
              <el-table-column label="角色" align="center" prop="roleType">
                <template slot-scope="scope">
                  <dict-tag :options="roleTypeLs" :value="scope.row.roleType" />
                </template>
              </el-table-column>
              <el-table-column label="姓名" align="center" prop="name"></el-table-column>
              <el-table-column label="本月计划直播时长" align="center" prop="planHour">
                <template slot-scope="scope">
                  <div>{{ scope.row.planHour }}小时</div>
                </template>
              </el-table-column>
              <el-table-column label="本月累计直播时长" align="center">
                <template slot-scope="scope">
                  <div>
                    {{ scope.row.liveHour }}小时{{ scope.row.liveMinute }}分{{
                      scope.row.liveSecond
                    }}秒
                  </div>
                </template>
              </el-table-column>
              <el-table-column label="累计直播时长" align="center" prop="totalLiveTime"></el-table-column>
              <el-table-column label="工作状态" align="center" prop="status">
                <template slot-scope="scope">
                  <dict-tag :options="statusLs" :value="scope.row.status" />
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
        <div class="item_box">
          <div class="item_box_title">
            <span class="title_garden"></span>
            <span class="title_word">直播信息</span>
          </div>
          <div class="item_box_nav">
            <el-form :model="queryParams" ref="queryForm" :inline="true">
              <el-form-item label="直播日期：" prop="">
                <el-date-picker clearable v-model="liveDate" type="monthrange" format="yyyy-MM" value-format="yyyy-MM"
                  range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" @change="hangeTime"
                  placeholder="请选择">
                </el-date-picker>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" icon="el-icon-search" @click="handleQuery">查询</el-button>
                <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
              </el-form-item>
            </el-form>
          </div>
          <div class="item_box_body">
            <el-table v-loading="loading" :data="liveStreamingInfoList" stripe border tooltip-effect="dark"
              style="width: 100%">
              <el-table-column label="序号" align="center" type="index" width="80px" />
              <el-table-column label="直播年月" align="center" prop="date"></el-table-column>
              <el-table-column label="计划直播时长" align="center" prop="planHour">
                <template slot-scope="scope">
                  <div>{{ scope.row.planHour }}小时</div>
                </template>
              </el-table-column>
              <el-table-column label="实际直播时长" align="center" prop="liveTime"></el-table-column>
              <el-table-column label="操作" align="center" fixed="right" width="200">
                <template slot-scope="scope">
                  <el-button type="text" size="small" @click="lookHandle(scope.row)">查看明细</el-button>
                  <el-button type="text" size="small" @click="exportHandle(scope.row)">导出</el-button>
                </template>
              </el-table-column>
            </el-table>
            <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
              :limit.sync="queryParams.pageSize" @pagination="getList"></pagination>
          </div>
        </div>
      </div>
    </div>
    <Dialog v-if="dialogVisible" :userInfo="userInfo" :visible.sync="dialogVisible" @success="_handleSuccess"></Dialog>
  </div>
</template>

<script>
import {
  workforceStatisticsDateList,
  workforceUserStatisticsDetail,
} from "@/api/customer/scheduleList";
import axios from "axios";
import { getToken } from "@/utils/auth";
import Dialog from "./components/anchorDialog";
import { parseTime } from "@/utils/index.js";
export default {
  data() {
    return {
      basicInfoList: [], //基本信息列表
      liveStreamingInfoList: [], //直播信息列表
      userInfo: {
        date: "", //	日期
        name: "", //姓名
        userId: "", //人员ID
      },
      dialogVisible: false,
      liveDate: "", //直播日期
      // 遮罩层
      loading: false,
      // 总条数
      total: 0,
      monthDate: "", //当前月
      statusLs: [], //工作列表
      roleTypeLs: [], //角色列表
      exportTitle: "", //导出表格
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        beginDate: "", //创建开始时间
        endDate: "", //创建结束时间
        userId: "",
      },
    };
  },
  components: {
    Dialog,
  },
  created() {
    this.queryParams.userId = this.$route.query.id;
    this.userInfo.userId = this.$route.query.id;
    this.getDict();
    this.getMonthFunc();
    this.getWorkforceUserStatisticsDetail();
    this.getList();
  },
  methods: {
    //获取状态字典
    getDict() {
      var dictType = "live_user_status,live_user_role_type";
      this.$getSelectList(dictType).then((res) => {
        this.statusLs = res.result[0].dictList;
        this.roleTypeLs = res.result[1].dictList;
      });
    },
    // 获取本月
    getMonthFunc() {
      let month = new Date();
      this.monthDate = parseTime(month, "{y}-{m}");
    },
    // 获取单个列表用户详情
    getWorkforceUserStatisticsDetail() {
      var data = {
        date: this.monthDate,
        id: this.queryParams.userId,
      };
      workforceUserStatisticsDetail(data).then((res) => {
        this.basicInfoList = [];
        this.basicInfoList.push(res.result);
        this.userInfo.name = res.result.name;
      });
    },
    //处理时间
    hangeTime(e) {
      this.queryParams.beginDate = e[0];
      this.queryParams.endDate = e[1];
    },
    // 查看明细
    lookHandle(row) {
      this.dialogVisible = true;
      this.userInfo.date = row.date;
    },
    // 表单重置
    reset() {
      this.liveDate = [];
      this.queryParams.pageNum = 1;
      this.queryParams.pageSize = 10;
      this.queryParams.beginDate = "";
      this.queryParams.endDate = "";
      this.handleQuery();
    },
    /** 查询列表 */
    getList() {
      this.loading = true;
      workforceStatisticsDateList(this.queryParams).then((response) => {
        response.result.records.forEach((item) => {
          for (var key in item) {
            if (item[key] === "") {
              item[key] = "-";
            }
          }
        });
        this.liveStreamingInfoList = response.result.records;
        this.total = response.result.total;
        this.loading = false;
      });
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      // this.resetForm("queryForm");
      this.reset();
    },
    // 导出
    exportHandle(row) {
      this.exportTitle = `${this.userInfo.name}${row.date}直播明细列表`;
      let params = {
        date: row.date,
        userId: this.$route.query.id,
      };
      const API =
        process.env.VUE_APP_BASE_API +
        "/client/live/schedule/statistics/date/list/export";
      axios
        .get(API, {
          params: params,
          responseType: "arraybuffer",
          headers: {
            "X-Access-Token": getToken(),
          },
        })
        .then((res) => {
          this.handleData(res);
        })
        .finally(() => { });
    },
    // 导出表格
    handleData(res) {
      const blob = new Blob([res.data]);
      const downloadElement = document.createElement("a");
      const href = window.URL.createObjectURL(blob); // 创建下载的链接
      downloadElement.href = href;
      downloadElement.download = this.exportTitle + ".xls"; // 下载后文件名
      document.body.appendChild(downloadElement);
      downloadElement.click(); // 点击下载
      document.body.removeChild(downloadElement); // 下载完成移除元素
      window.URL.revokeObjectURL(href); // 释放掉blob对象
    },
    _handleSuccess(e) {
      //成功回调
      //   this.resetQuery()
      this.getList();
    },
  },
};
</script>

<style scoped lang="scss">
::v-deep {
  .main {
    box-shadow: 0px 4px 12px 0px rgb(1 41 99 / 6%);
    background-color: #fff;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 14px;

    .main_title {
      font-size: 18px;
      font-weight: bold;
      color: #1890ff;
      padding-left: 10px;
      border-left: 4px solid #1890ff;
      margin: 20px 0;
      display: flex;
      justify-content: flex-start;
      align-items: center;
    }

    .main_body {
      .item_box {
        &:first-child {
          margin-bottom: 40px;
        }

        .item_box_title {
          font-size: 16px;
          display: flex;
          flex-direction: row;
          align-items: center;
          margin-bottom: 20px;
          font-weight: bold;

          .title_garden {
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: #222222;
            margin-right: 5px;
          }
        }
      }
    }
  }
}
</style>